<template>
    <div class="divmain">
        <div class="divmain-case">
            <div ref="contraTop" class="divmain-case-top">
                <div class="divmain-case-top-left">
                  <div style="font-size: 14px;color: #333333;">科室</div>
                  <el-select
                      v-model="selectValue"
                      clearable
                      placeholder="请选择"
                      style="width: 200px;margin-left:6px;margin-right:12px"
                  >
                      <el-option
                          v-for="item in selectoptions"
                          :key="item.bh"
                          :label="item.mc"
                          :value="item.bh"
                      />
                  </el-select>
                  <el-button type="primary" @click="searchClick" :icon="Search" style="width:72px">查询</el-button>
                </div>
                <el-button type="primary" @click="saveClick" style="width:72px">保存</el-button>
            </div>
            <div class="line"></div>
            <!-- 表格 -->
            <xinpuTableGrid
            ref="xinpuGrid"
            :loading="loading"
            :tableHeight="tableHeight"
            :tableWidth="tableWidth"
            :columnsData="columns"
            :data="data"
            :border="true"
            @updataSelect="updataSelect"
            @selectCheckedChange="selectCheckedChange"
            >
            </xinpuTableGrid>

            <!-- <div class="vxe-pageNo" ref="pageNoRef">
                <vxe-pager
                    v-model:currentPage="pageNo.PageNo"
                    v-model:pageSize="pageNo.PageSize"
                    :total="pageNo.total"
                    @page-change="pageChange"
                >
                </vxe-pager>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import xinpuTableGrid from "@/components/xinpuTableGrid/index.vue";
import {Search} from '@element-plus/icons-vue'
import Sortable from "sortablejs";
import { ref, onMounted } from "vue";
const selectValue = ref('')
const selectoptions = ref([])
const contraTop = ref(null)
const pageNoRef = ref();
const pageNo = ref({
  total: 0,
  PageNo: 1,
  PageSize: 20,
});
const loading = ref(false);
const xinpuGrid = ref(null);
const tableHeight = ref(0);
const tableWidth = ref(0);
const options = ref([[{ code: "myBtn", name: "列调整" }]]);
const saveData = ref([]);
const columns = ref([
  // { type: "checkbox", width: 48 },
  { field: "rybmName", title: "人员"},
  { field: "bmbmName", title: "科室"},
  { field: "bs", title: "标识"},
  { field: "wx_xsxh", title: "微信显示序号", editRender: { name: "input" } },
  { 
    field: "wx_sfxs", 
    title: "微信是否显示",
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          dm:'0',
          mc:'否'
        },
        {
          dm:'1',
          mc:'是'
        }
      ],
      objKey:'dm',
      label:'mc'
    },
  },
  { 
    field: "gh_sfxs", 
    title: "挂号是否显示",
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          dm:'0',
          mc:'否'
        },
        {
          dm:'1',
          mc:'是'
        }
      ],
      objKey:'dm',
      label:'mc'
    },
  },
]);
const rybmArr = ref([]);
const ksArr = ref([])
const data = ref([]);
const gettableHeight = () => {
  // 这里是屏幕大小变化时需要执行的逻辑
  let screenheight = document.body.clientHeight;
  let screenWidth = document.body.clientWidth - 242;
  console.log(screenheight, screenWidth);
  screenheight =
    screenheight -
    contraTop.value.offsetHeight -
    150;
  tableHeight.value = screenheight;
  tableWidth.value = screenWidth;
  console.log(tableHeight.value, tableWidth.value);
};
const pageChange = ({ pageSize, currentPage }) => {
  pageNo.value.PageNo = currentPage
  pageNo.value.PageSize = pageSize
  getData()
}
// 下拉框需要修改的数据
const updataSelect = (val, column) => {
  if(column.column && column.column.field == 'wx_sfxs'){
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.dm;
  }
  if(column.column && column.column.field == 'gh_sfxs'){
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.dm;
  }
};
// 获取下拉框里选中的复选框
const selectCheckedChange = (val, column) => {};
// 获取点击的右键菜单的数据
const updataOptions = (data) => {
  console.log(data);
};
const saveClick = async() =>{
  const arr = xinpuGrid.value.getEditData();
  console.log(arr);
  if(arr && arr.length>0){
    arr.forEach(item=>{
      item.saveflag = '2'
    })
    const res = await window.xinpuHttpApi('100091',{'list':arr})
    console.log(res);
    if(res && res.Flag){
      ElMessage({
          message: '保存成功',
          type: 'success',
      })
    }else{
      ElMessage.error(res.CodeMsg)
    }
  }else{
    ElMessage({
        message: '当前没有要保存的数据',
        type: 'warning',
    })
  }
}
const searchClick = () =>{
  getData()
}
const getData = async()=>{
  loading.value = true
  const res = await window.xinpuHttpApi('100090',{'bmbm':selectValue.value})
  console.log(res);
  if(res && res.ReContent){
    res.ReContent.forEach(item => {
      rybmArr.value.forEach(it=>{
        if(item.rybm == it.rybm){
          item.rybmName = it.ryxm
        }
      })
    });
    res.ReContent.forEach(item => {
      selectoptions.value.forEach(it=>{
        if(item.bmbm == it.bh){
          item.bmbmName = it.mc
        }
      })
    });
    data.value = res.ReContent
    // pageNo.value.total = res.ReContent.RecordCount
  }
  console.log(data.value);
  loading.value = false
}
//获取人员编码
const getrybmData = async() =>{
  const res = await window.xinpuHttpApi('100080',{})
  if(res && res.Flag){
    rybmArr.value = res.ReContent
  }
}
//获取科室
const getksData = async() =>{
  const res = await window.xinpuHttpApi('102001',{})
  console.log(res);
  if(res && res.Flag){
    // ksArr.value = res.ReContent
    selectoptions.value = res.ReContent
  }
}
// 这是自定义的列头改变的数据
const updatacolumns = (val) => {
  // console.log(val);
  // columns.value = val
};
onMounted(() => {
  gettableHeight();
  getrybmData()
  getksData()
  getData()
});
</script>

<style lang="scss" scoped>
.divmain{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #F7F7F7;
  .divmain-case{
    width: 100%;
    height: calc(100vh - 100px);
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    .divmain-case-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .divmain-case-top-left{
          display: flex;
          align-items: center;
        }
    }
    .line{
        width: 100%;
        height: 1px;
        background: #EBEBEB;
        margin: 12px 0;
    }
  }
}
.vxe-pageNo {
  padding-right: 16px;
  box-sizing: border-box;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
  // overflow: hidden;
}
</style>